<template>
  <div>
    <!-- search start -->
    <div class="search">
      <el-input placeholder="请输入公司名称/负责人"
                style="width:300px;margin-bottom:30px;float:left;"
                clearable
                v-model="searchkey">
      </el-input>

      <div class="block"
           style="margin:0 10px;float:left;">
        <el-date-picker v-model="activeDate"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>

      <el-button type="primary"
                 icon="el-icon-search"
                 @click="init()">搜索</el-button>
    </div>
    <!-- search end -->
    <!-- 退费预警列表数据 -->
    <v-table :tableData="tableData"
             :tableLabel="tableLabel" />
    <!-- 分页器 -->
    <ubi-paging />
  </div>
</template>

<script>
import ubiPaging from '@/views/UBI/common/ubi-data-pagination'
export default {
  name: "returnWarning",
  data () {
    return {
      activeDate: '', //搜索选择的日期
      tableData: [], //退费预警表格数据
      page: 1, //当前页
      pageSize: 8, //每页显示多少条数据
      searchkey: '', //搜索关键字
      tableLabel: [
        {
          label: '用户姓名',
          prop: ''
        },
        {
          label: '用户电话',
          prop: ''
        },
        {
          label: '设备号',
          prop: ''
        },
        {
          label: '连续预警天数',
          prop: ''
        }
      ] //退费预警表格数据对应的标题
    }
  },
  components: {
    ubiPaging
  },
  methods: {
    async init () {
      let startDate, endDate
      if (this.activeDate == null) {
        [startDate, endDate] = [' ', ' ']
      } else {
        [startDate, endDate] = [this.activeDate[0], this.activeDate[1]]
      }
      let argumentsStr = {
        page: this.page,
        pageSize: this.pageSize,
        search: this.searchkey,
        start_time: startDate,
        end_time: endDate
      };
      let res = await this.api.returnWarning(argumentsStr).then(res => res)
      if (!res.code) {
        this.$message(res.msg)
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
</style>
